.TreeItemWrapper {
  padding-left: var(--spacing);

  &.clone {
    display: inline-block;
    pointer-events: none;
    padding: 5px 0 0 10px;

    .TreeItem {
      --vertical-padding: 5px;

      max-width: 200px;
      border-radius: 4px;
      box-shadow: 0 15px 15px 0 rgb(34 33 81 / 10%);
    }

    &.notAllow {
      .TreeItem {
        background-color: #f5f5f5;
        color: rgb(22 22 22 / 25%);
      }
    }
  }

  &.fixed {
    .TreeItem {
      background-color: var(--supos-tag-color);
    }
  }

  &.disabledSelect {
    .TreeItem {
      cursor: not-allowed;
    }
  }

  &.ghost {
    &.indicator {
      opacity: 1;
      position: relative;
      z-index: 1;
      margin-bottom: -1px;

      &.notAllow {
        .TreeItem {
          border-color: #c6c6c6;
          background-color: #c6c6c6;

          &::before {
            border-left: 8px solid #c6c6c6;
          }
        }
      }

      .TreeItem {
        position: relative;
        padding: 0;
        height: 1px;
        border-color: var(--supos-theme-color);
        background-color: var(--supos-theme-color);

        &::before {
          position: absolute;
          left: -1px;
          top: -6px;
          display: block;
          content: '';
          width: 0;
          height: 0;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          border-left: 8px solid var(--supos-theme-color);
          background-color: transparent;
        }

        > * {
          /* Items are hidden using height and opacity to retain focus */
          opacity: 0;
          height: 0;
        }
      }
    }
  }

  &.selected {
    .TreeItem {
      border-color: var(--supos-theme-color);
      background-color: var(--supos-select-bg-color);
    }
  }
}

.TreeItem {
  cursor: pointer;

  --vertical-padding: 8px;

  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--vertical-padding) 8px;
  border-radius: 3px;
  border: 1px solid #c6c6c6;
  background-color: var(--supos-bg-color);
}

.disableInteraction {
  pointer-events: none;
}

.disableSelection,
.clone {
  .Text,
  .Count {
    user-select: none;
  }
}

.Text {
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.rightExtra {
  flex-shrink: 0;
}

.leftExtra {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
